import React, { memo, useEffect } from 'react'
import { ArticleDetailWrapper } from './style'
import {
  CalendarOutlined,
  EyeOutlined,
  FileTextOutlined
} from '@ant-design/icons'
import Moment from 'moment'
import { Skeleton } from 'antd'
import 'highlight.js/styles/atom-one-dark.css'
import RendererMarkdown from '@/utils/rendererMarkdown'
import { withRouter } from 'react-router-dom'

function ArticleDetail(props) {
  const { articleDetail = {}, userId } = props

  useEffect(() => {
    const timer = setTimeout(() => {
      document.title = `分类 | ${articleDetail.title}`
    }, 300)
    return () => {
      clearTimeout(timer)
    }
  }, [articleDetail.title])

  const handleClassify = (classifyName, classifyId) => {
    props.history.push(
      `/blog/category/u/${userId}/${classifyId}?classify=${classifyName}`
    )
  }

  return (
    <ArticleDetailWrapper className="animate__animated animate__zoomIn base-bgc">
      {articleDetail && articleDetail.id ? (
        <>
          <h3 className="text-center title fs-6 text-bolder pointer">
            <span>{articleDetail.title}</span>
          </h3>
          <div className="detail text-center mt-3">
            <div className="up-date inline-block">
              <CalendarOutlined style={{ color: '#00a7e0' }} />
              <span className="ml-1 date-timer">
                {Moment(articleDetail.createTime).format(
                  'YYYY-MM-DD h:mm:ss a'
                )}
              </span>
            </div>
            <div className="text-count inline-block ml-5">
              <FileTextOutlined />
              <span className="ml-1">字数统计{articleDetail.count}</span>
            </div>
            <div className="view-count inline-block ml-5">
              <EyeOutlined style={{ color: '#ec4e30' }} />
              <span className="ml-1" style={{ color: '#ec4e30' }}>
                被{articleDetail.viewCount}人看爆
              </span>
            </div>
          </div>
          <div
            className="home-a-content content"
            dangerouslySetInnerHTML={{
              __html: RendererMarkdown(articleDetail.content)
            }}
          ></div>

          <div className="post-date">
            <div className="post-mouth">
              {new Date(articleDetail.createTime).getMonth() + 1}月
            </div>
            <div className="post-day">
              {new Date(articleDetail.createTime).getDate()}日
            </div>
          </div>
          <div
            className="post-badge"
            onClick={(e) =>
              handleClassify(
                articleDetail.classifyName,
                articleDetail.classifyId
              )
            }
          >
            <span>{articleDetail.classifyName}</span>
          </div>
        </>
      ) : (
        <Skeleton active />
      )}
    </ArticleDetailWrapper>
  )
}

export default memo(withRouter(ArticleDetail))
